// 生产工序

<template>
  <view>
    <mes-card-check ref="cardCheckRef" :form="cardCheckForm">
      <template v-slot:subheader="scope">
        <view class="text-over-1 w-full">
          {{ scope.data }}
        </view>
      </template>
    </mes-card-check>
    <mes-button type="1" @tap="add"></mes-button>
    <mes-tip v-if="noData"></mes-tip>
    <!-- 全选 -->
    <view v-if="!noData" class="check-all mes-card-check">
      <checkbox-group @change="checkedAllChange">
        <label>
          <checkbox :checked="checkedAll" class="choose-check" />全选
        </label>
      </checkbox-group>
      <view class="btn" @tap="delChecked">删除</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      hasMore: true,
      noData: false,
      checkedAll: false,
      postForm: {
        bom_id: '',
        page: 1
      },
      cardCheckForm: {
        valueName: 'id',
        checked: [],
        items: [],
        edit: (index, item) => {
          uni.navigateTo({
            url: `/pages/home/bom_list/process_add?type=edit&id=${item.row.id}`
          })
        },
        del: (index, item) => {
          const ids = [item.row.id]
          this.del(ids, 1)
        },
        checkChange: (e, form) => {
          this.checkedAll = form.items.every((item) => item.checked)
        }
      }
    }
  },
  onLoad(options) {
    const id = options.id
    this.postForm.bom_id = id
  },
  onShow() {
    this.resetPaging()
    this.getData()
  },
  onReachBottom() {
    if (!this.hasMore) return
    this.postForm.page++
    this.getData()
  },
  methods: {
    // 获取数据
    async getData() {
      const res = await this.$api.prod.procedure.index(this.postForm)
      if (res.code == 200) {
        this.hasMore = res.data.list.length ? true : false
        const list = []
        res.data.list.forEach((item) => {
          list.push({
            row: item,
            header: {
              title: item.purchase_code
            },
            subheader: item.name,
            body: [
              {
                name: '车间：',
                value: item.workshop_id
              },
              {
                name: '单位工资：',
                value: item.wages
              },
              {
                name: '标准工时：',
                value: item.hours
              },
              {
                name: '备注：',
                value: item.remark
              }
            ],
            footer: true
          })
        })
        this.cardCheckForm.items = [...this.cardCheckForm.items, ...list]
        this.noData = !this.cardCheckForm.items.length
        this.$refs.cardCheckRef.init()
      }
    },
    // 重置分页
    resetPaging() {
      this.hasMore = true
      this.postForm.page = 1
      this.cardCheckForm.items = []
    },
    // 添加
    add() {
      uni.navigateTo({
        url: `/pages/home/bom_list/process_add?type=add&bom_id=${this.postForm.bom_id}`
      })
    },
    // 删除
    del(ids, type) {
      uni.showModal({
        title: '提示',
        content: '是否确认删除？',
        success: async ({ confirm }) => {
          if (!confirm) return
          const res = await this.$api.prod.procedure.del({ id: ids.join(',') })
          if (res.code == 200) {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
            this.resetPaging()
            if (type === 1) {
              const id = ids[0]
              let i = ''
              this.cardCheckForm.checked.forEach((item, index) => {
                if (id == item) i = index
              })
              if (i !== '') {
                this.cardCheckForm.checked.splice(i, 1)
              }
            } else if (type === 2) {
              this.cardCheckForm.checked = []
            }
            this.getData()
          }
        }
      })
    },
    delChecked() {
      if (!this.cardCheckForm.checked.length) {
        return uni.showToast({
          title: '请选择需要删除的数据',
          icon: 'none'
        })
      }
      this.del(this.cardCheckForm.checked, 2)
    },
    // 全选
    checkedAllChange(e) {
      this.checkedAll = e.detail.value.length
      if (this.checkedAll) {
        this.cardCheckForm.checked = this.cardCheckForm.items.map(
          (item) => item.row.id
        )
      } else {
        this.cardCheckForm.checked = []
      }
      this.$refs.cardCheckRef.init()
    }
  }
}
</script>

<style>
page {
  padding-bottom: 400rpx;
}
</style>
<style lang="less" scoped>
.check-all {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 750rpx;
  height: 120rpx;
  padding-left: 38rpx;
  background: #ffffff;
  label {
    display: flex;
    align-items: center;
  }
  .btn {
    width: 176rpx;
    height: 120rpx;
    background: linear-gradient(90deg, #5cc1ff 0%, #1a96ff 100%);
    font-size: 32rpx;
    color: #ffffff;
    text-align: center;
    line-height: 120rpx;
  }
}
</style>
